<template>
    <div>
        <div class="select_management">
            <div class="title">权限名称：</div>
            <div class="content">
                <el-input v-model="queryParams.permissionName" @input="queryRolesList" placeholder="手机号/用户名"
                    clearable></el-input>
            </div>
            <div class="title">权限编码：</div>
            <div class="content">
                <el-input v-model="queryParams.permissionCode" @input="queryRolesList" placeholder="手机号/用户名"
                    clearable></el-input>
            </div>
            <el-button type="success" size="small" icon="el-icon-plus" style="margin-left: 10px;"
                @click="handleEdit($event, null)" v-if="btnList.includes('addBtn')">新增权限</el-button>
        </div>
        <div class="table_management">
            <el-table :data="tableData" style="width: 100%" border stripe :header-cell-style="getRowClass"
                :max-height="maxHeight" v-loading="loading">
                <el-table-column label="权限名称" prop="permissionName" align="center">
                </el-table-column>
                <el-table-column label="权限编码" prop="permissionCode" align="center">
                </el-table-column>
                <el-table-column label="权限类型" prop="permissionType" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                            <el-button size="mini" @click="handleEdit($event, scope.row)"
                                icon="el-icon-edit-outline" v-if="btnList.includes('editMenu')"></el-button>
                        </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <el-button size="mini" type="danger" @click="handleDelete($event, scope.row.id)"
                                icon="el-icon-delete" v-if="btnList.includes('delectBtn')"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="createDate">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="queryParams.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="queryParams.pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- dialog -->
        <el-dialog :title="title" :visible.sync="dialogVisible" :width="promissionWidth" v-dialogDrag>
            <el-form label-position="left" label-width="80px" :model="from">
                <el-form-item label="权限名称">
                    <el-input v-model="from.permissionName"></el-input>
                </el-form-item>
                <el-form-item label="权限类型">
                    <el-select v-model="from.permissionType" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限编码">
                    <el-input v-model="from.permissionCode"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="determine">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { throttle } from '@/utils';
import {
    pagePermissionRequest,
    addPermissionRequest,
    modifyPermissionRequest,
    deletePermissionRequest
} from '@/api/management'
export default {
    name: 'GenecloudUiButton',

    data() {
        return {
            btnList: this.$store.state.login.buttonPermissionList,
            maxHeight: `600px`,
            loading: true,
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                permissionName: '',
                permissionCode: '',
                permissionType: 'button',
            },
            total: 10,
            tableData: [],
            //dialog
            dialogVisible: false,
            title: '',
            promissionWidth: '400px',
            from: {
                id: '',
                permissionName: '',
                permissionType: 'button',
                permissionCode: ''
            },
            options: [
                {
                    value: 'button',
                    label: '按钮'
                }
            ],
            rowList: null,
        };
    },
    created() {
        this.getList(this.queryParams)
        window.addEventListener('resize', this.windowResize)
    },
    mounted() {

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.windowResize)
    },
    methods: {
        //table 自定义表头
        getRowClass({ rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return "background:#eee;font-weight: 400;color:#666;text-align:center";
            }
        },
        windowResize() {
            let val = document.body.clientHeight
            this.maxHeight = (val - 350) + 'px'
        },
        async getList(queryParams) {
            const res = await pagePermissionRequest(queryParams)
            if (res.code !== 200) return this.$message.error(res.message)
            this.tableData = res.data.list
            this.loading = false
            this.total = res.data.total
        },

        handleDelete(event, permissionIdList) {
            this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                beforeClose: async (action, instance, done) => {
                    if (action === 'confirm') {
                        try {
                            const res = await deletePermissionRequest({
                                permissionIdList:[permissionIdList]
                            })
                            if (res.code !== 200) {
                                this.$message.error(res.message)
                            }else{
                                this.$message({
                                    message: res.message,
                                    type: 'success'
                                })
                                this.getList(this.queryParams)
                            }
                        } catch (error) {
                            this.$message.error('服务器错误，请联系管理员！')
                        }
                    } else if (action === 'cancel') {
                        this.$message({
                            message: '取消操作',
                        })
                    }
                    done();
                }
            }).catch(() => { })
        },
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList(this.queryParams)
        },
        //修改页码
        handleCurrentChange(val) {
            this.queryParams.pageNo = val
            this.getList(this.queryParams)
        },
        handleEdit(event, row) {
            this.rowList = row
            if (row) {
                this.title = '编辑按钮权限'
                this.from.id = row.id
                this.from.permissionName = row.permissionName
                this.from.permissionCode = row.permissionCode
            } else {
                this.title = '新增按钮权限'
                this.from.id = null
                this.from.permissionName = ''
                this.from.permissionCode = ''
            }
            this.dialogVisible = true
        },
        async determine() {
            let res
            if (this.rowList) {
                res = await modifyPermissionRequest(this.from)
            } else {
                res = await addPermissionRequest(this.from)
            }
            if (res.code !== 200) return this.$message.error(res.message)
            this.$message({
                type: 'success',
                message: res.message
            })
            this.dialogVisible = false
            this.getList(this.queryParams)
        },
        //关键字筛选
        queryRolesList: throttle(function () {
            this.getList(this.queryParams)
        }, 500),
    },
};
</script>

<style lang="scss" scoped>
.table_management {
    border: 1px solid #d3ddeb;
    border-radius: 6px;

    .createDate {
        padding-top: 15px;
    }
}

.select_management {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 50px;
    margin-bottom: 15px;

    ::v-deep .el-input__inner {
        height: 35px;
        line-height: 35px;
        border-radius: 4px;
    }

    .title {
        margin-left: 10px;
    }
}

::v-deep .el-dialog__header {
    text-align: center;
    font-weight: 700;
}

::v-deep .el-dialog__body {
    text-align: center;

    .el-input__inner {
        border-radius: 4px;
        width: 260px;
    }
}

::v-deep .el-dialog__footer {
    display: flex;
    justify-content: center;
}
</style>